<template>
  <div class="tabs-search-wrapper">
    <div class="tabs-ul space-x-8">
      <div
        v-for="(item, index) in tabsDataList"
        :key="index"
        class="tabs-li"
        :class="{ active: currentIndex === index }"
        @click="handleTabsClick(item, index)"
      >
        {{ item.label }}
      </div>
    </div>

    <div class="search-box">
      <div class="input-menu">
        <el-input :placeholder="placeholder"> </el-input>
        <div class="menu">
          <div v-show="currentIndex === 0" class="park-map-btn">
            <i class="el-input__icon el-icon-map-location"></i>
            <span>地图</span>
          </div>
        </div>
        <div class="triangle-border-up">
          <span :style="{ left }"></span>
        </div>
      </div>
      <div class="btn">
        <el-button type="primary" @click="handleSearch">开始查询</el-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  components: {},
  data() {
    return {
      currentIndex: 0,
      tabsDataList: [
        {
          label: '查园区',
          path: '/park',
        },
        {
          label: '查载体',
          path: '/resource',
        },
        {
          label: '找项目',
          path: '/project',
        },
        {
          label: '享政策',
          path: '/policy',
        },
      ],
    }
  },
  computed: {
    left() {
      const map = ['20px', '100px', '180px', '260px']
      return map[this.currentIndex]
    },
    placeholder() {
      const map = [
        '请输入园区关键字, 如:铜梁高新技术',
        '请输入资源关键字',
        '请输入项目关键字',
        '请输入政策关键字',
      ]

      return map[this.currentIndex]
    },
    path() {
      return this.tabsDataList[this.currentIndex].path
    },
  },
  mounted() {},
  methods: {
    handleSearch() {
      this.$router.push(this.path)
    },
    handleTabsClick(item, index) {
      console.log('%c [ item ]-82', 'font-size:13px; background:pink; color:#bf2c9f;', item)
      if (this.currentIndex === index) return
      this.currentIndex = index
    },
  },
})
</script>
<style lang="scss" scoped>
.tabs-search-wrapper {
  width: 710px;
  margin: 0 auto;

  .tabs-ul {
    display: flex;
    align-items: center;

    .tabs-li {
      cursor: pointer;
      color: #ddd;
      font-size: 16px;
      margin-bottom: 30px;
    }

    .active {
      font-weight: bold;
      color: #fff;
    }
  }

  .search-box {
    display: flex;

    .input-menu {
      display: flex;
      position: relative;

      ::v-deep.el-input__inner {
        height: 55px;
        width: 690px;
        border-radius: 4px 0 0 4px;
      }

      .menu {
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
        /* background-color: #f00; */

        .park-map-btn {
          width: 80px;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: bold;
          cursor: pointer;

          .el-icon-map-location {
            font-size: 18px;
          }

          & > span {
            line-height: 1;
          }
        }
      }

      .triangle-border-up {
        & > span {
          display: block;
          width: 0;
          height: 0;
          border-width: 0 5px 15px;
          border-style: solid;
          border-color: transparent transparent #fff; /*透明 透明  黄*/
          position: absolute;
          top: -13px;
          transition: 0.5s all;
        }
      }
    }

    .btn {
      ::v-deep.el-button {
        width: 120px;
        height: 55px;
        border-radius: 0 4px 4px 0;
      }
    }
  }
}
</style>
